02. The DOM

In this section, we'll look at the Document Object Model - otherwise known as the DOM.

The words "the DOM" are used all over developer documentation sites and tutorials on writing interactive JavaScript code. But what is it? Perhaps you've used even used the DOM and still aren't quite sure what it is. Is it the browser? Is it a special part of JavaScript? ¯\_(ツ)_/¯

Reflect

QUESTION:

Take a couple of minutes think about what you think "the DOM" is/refers to, and write out a description of the DOM.

ANSWER:

Thanks for taking the time! The DOM is incredibly powerful, but it's helpful to really know what it is, so let's dig into it!

L1 14 - What Is The DOM V1

L1 12 - DOM Explanation By Illya

To recap the video, the following steps happen:

  • HTML is received
  • HTML tags are converted to tokens
  • tokens are converted to Nodes
  • Nodes are converted to the DOM

When you request a website, no matter what backend language is powering that website, it will respond with HTML. The browser receives a stream of HTML. The bytes are run through a complicated (but fully documented) parsing process that determines the different characters (e.g. the start tag character <, an attribute like href, a closing angle bracket like >). After parsing has occurred, a process called tokenization. Tokenization takes one character at a time and builds up tokens. The tokens are:

  • DOCTYPE
  • start tag
  • end tag
  • comment
  • character
  • end-of-file

Let's take a break for a second. At this state, the browser has received the bytes that've been sent by a server. The browser has converted the bytes to tags and has read through the tags to create a list of tokens.

This list of tokens then goes through the tree construction stage. The output of this stage is a tree-like structure - this is the DOM!

I want to point out two important quotes that Illya said in the video:

a tree structure that captures the content and properties of the HTML and all the relationships between the nodes

the DOM is the full, parsed representation of the HTML

So the DOM is a model (representation) of the relationships and attributes of the HTML document that was received. Remember that DOM stands for "Document Object Model". Something that I've found to be true as I've been learning is that to break something down, just read the thing backwards:

Document Object Model

…would become…

Object Model of the Document!

Remember that a JavaScript object is a tree-like structure that has properties and values. So the DOM can be accessed using a special object provided by the browser: document

Try this:

  1. open the console on this page
  • type out the word document
    • careful not to declare it (const document)
    • careful not to wrap it in quotes ("document")
  • press enter

_Viewing the `document` object in the DevTools' Console pane._

Viewing the document object in the DevTools' Console pane.

The document object is provided by the browser and is a representation of the HTML document. This object is not provided by the JavaScript language. ECMAScript is the language specification that JavaScript is based on, and it only references the document object model in one place, in its "Global Object" section:

In addition to the properties defined in this specification the global object may have additional host defined properties. This may include a property whose value is the global object itself; for example, in the HTML document object model the window property of the global object is the global object itself. (source)

Basically, this says that the document object is not part of JavaScript, but is expected to already exist and be freely accessible to JavaScript code.

The DOM is standardized by the W3C. There are a number of specifications that make up the DOM, here are few:

  • Core Specification
  • Events Specification
  • Style Specification
  • Validation Specification
  • Load and Save Specification

To see the full list of DOM specs, check out the standard at: https://www.w3.org/standards/techs/dom#w3c_all

Reflect

QUESTION:

Ok, so do not scroll back up or review what you just read. Just take a moment, think about everything you've learned about the DOM and the document object and, in your own words, write an explanation of what "the DOM" is.

ANSWER:

Thanks for taking the time! Hopefully, the DOM makes much more sense now than it did at the beginning of this section.

The DOM Recap

The DOM stands for "Document Object Model" and is a tree-like structure that is a representation of the HTML document, the relationship between elements, and contains the content and properties of the elements.

The DOM is not:

  • part of the JavaScript language

The DOM is:

  • constructed from the browser
  • is globally accessible by JavaScript code using the document object

The DOM is used all of the time and is what we'll be using throughout this course!

Further Research

Next Concept